<template>
  <div class="hello">
    <h1>{{{{raw-helper}}}}{{ msg }}{{{{/raw-helper}}}}</h1>
    <p>
      For a guide and recipes on how to configure / customize the Vue part of
      <br />this project, check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <!-- Remove the "display: none" style and open the JavaScript console in the browser to see what this function does -->
    <button id="contractCall" style="display: none;" @click="contractCall">{{ callToAction }}</button>
    <h3>Learn Vue</h3>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
      </li>
      <li>
        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
      </li>
    </ul>
    <h3>Learn Ethereum</h3>
    <ul>
      <li>
        <a href="https://ethereum.org/developers/#getting-started" target="_blank" rel="noopener">Getting Started</a>
      </li>
      <li>
        <a href="https://ethereum.org/wallets/" target="_blank" rel="noopener">Wallets</a>
      </li>
      <li>
        <a href="https://ethereum.stackexchange.com/" target="_blank" rel="noopener">StackExchange</a>
      </li>
      <li>
        <a href="https://reddit.com/r/ethdev/" target="_blank" rel="noopener">Reddit</a>
      </li>
    </ul>
    <h3>Learn {{ learn.name }}</h3>
    <ul>
      {{#each learn.items }}
      <li>
        <a href="{{ this.url }}" target="_blank" rel="noopener">{{ this.label }}</a>
      </li>
      {{/each}}
    </ul>
  </div>
</template>

<script>
  import { Contract } from "@ethersproject/contracts";
  import { getDefaultProvider } from "@ethersproject/providers";
  {{#each imports}}
  {{{ this }}}
  {{/each}}

  export default {
    methods: {
      contractCall: async function () {
        {{#each contractCall}}
        {{{ this }}}
        {{/each}}
      },
    },
    name: "HelloWorld",
    props: {
      msg: String,
    },
    async mounted() {
      try {
        const { data, loading, stale } = await this.$apollo.query({
          query: {{ subgraphQuery.name }},
        });
        if (!loading && !stale && data && data.{{ subgraphQuery.key }}) {
          console.log({ {{ subgraphQuery.key }}: data.{{ subgraphQuery.key }} });
        }
      } catch (error) {
        console.error("Error while pulling data from the subgraph:", error);
      }
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1 {
    margin-top: 24px;
  }

  h3 {
    margin: 40px 0 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
